<template>
    <div class="tags-combo">
        <Tags 
            v-for="(group, index) in tagGroups" 
            :key="index"
            :tag-count="group.tagCount" 
            :selected-tag="selectedTag" 
            @update:selected-tag="updateSelectedTag" 
            :start-index="group.startIndex" 
            :title="group.title"
            :tag-texts="group.tagTexts"
        >
            <template #icon>
                <el-icon v-if="index === 0"><ChatDotRound /></el-icon>
                <el-icon v-else-if="index === 1"><Headset /></el-icon>
                <el-icon v-else-if="index === 2"><Help /></el-icon>
                <el-icon v-else-if="index === 3"><User /></el-icon>
                <el-icon v-else-if="index === 4"><MoonNight /></el-icon>
            </template>
        </Tags>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import Tags from './Tags.vue';
import { listCategory } from '@/api/singer/category';

const selectedTag = ref(null);
const emit = defineEmits(['update:selectedTag']);
const categories = ref([]);
const getSelectedTagText = (index) => {
  if (index === null || index === undefined) {
    return '所有歌单';
  }
  for (const group of tagGroups.value) {
    if (index >= group.startIndex && index < group.startIndex + group.tagCount) {
      return group.tagTexts[index - group.startIndex];
    }
  }
  return '';
};

const updateSelectedTag = (value) => {
  selectedTag.value = value;
  const tagText = getSelectedTagText(value);
  emit('update:selectedTag', { index: value, text: tagText });
};

// 假数据作为备选方案 - 匹配后端 ccCategory 结构
const mockData = [
    // 父级分类
    { id: 1, pid: null, name: '语种', description: '音乐语种分类', sortOrder: 1 },
    { id: 2, pid: null, name: '流派', description: '音乐流派分类', sortOrder: 2 },
    { id: 3, pid: null, name: '主题', description: '音乐主题分类', sortOrder: 3 },
    { id: 4, pid: null, name: '情感', description: '音乐情感分类', sortOrder: 4 },
    { id: 5, pid: null, name: '场景', description: '音乐场景分类', sortOrder: 5 },
    
    // 语种子分类
    { id: 11, pid: 1, name: '华语', description: '华语音乐', sortOrder: 1 },
    { id: 12, pid: 1, name: '欧美', description: '欧美音乐', sortOrder: 2 },
    { id: 13, pid: 1, name: '日语', description: '日语音乐', sortOrder: 3 },
    { id: 14, pid: 1, name: '韩语', description: '韩语音乐', sortOrder: 4 },
    { id: 15, pid: 1, name: '粤语', description: '粤语音乐', sortOrder: 5 },
    { id: 16, pid: 1, name: '闽南语', description: '闽南语音乐', sortOrder: 6 },
    
    // 流派子分类
    { id: 21, pid: 2, name: '流行', description: '流行音乐', sortOrder: 1 },
    { id: 22, pid: 2, name: '摇滚', description: '摇滚音乐', sortOrder: 2 },
    { id: 23, pid: 2, name: '民谣', description: '民谣音乐', sortOrder: 3 },
    { id: 24, pid: 2, name: '电子', description: '电子音乐', sortOrder: 4 },
    { id: 25, pid: 2, name: '舞曲', description: '舞曲音乐', sortOrder: 5 },
    { id: 26, pid: 2, name: '说唱', description: '说唱音乐', sortOrder: 6 },
    { id: 27, pid: 2, name: '轻音乐', description: '轻音乐', sortOrder: 7 },
    { id: 28, pid: 2, name: '爵士', description: '爵士音乐', sortOrder: 8 },
    { id: 29, pid: 2, name: '乡村', description: '乡村音乐', sortOrder: 9 },
    { id: 30, pid: 2, name: '蓝调', description: '蓝调音乐', sortOrder: 10 },
    { id: 31, pid: 2, name: '雷鬼', description: '雷鬼音乐', sortOrder: 11 },
    { id: 32, pid: 2, name: '朋克', description: '朋克音乐', sortOrder: 12 },
    { id: 33, pid: 2, name: '金属', description: '金属音乐', sortOrder: 13 },
    { id: 34, pid: 2, name: '另类/独立', description: '另类独立音乐', sortOrder: 14 },
    { id: 35, pid: 2, name: '古典', description: '古典音乐', sortOrder: 15 },
    { id: 36, pid: 2, name: '民族', description: '民族音乐', sortOrder: 16 },
    { id: 37, pid: 2, name: '英伦', description: '英伦音乐', sortOrder: 17 },
    { id: 38, pid: 2, name: '新世纪', description: '新世纪音乐', sortOrder: 18 },
    { id: 39, pid: 2, name: '拉丁', description: '拉丁音乐', sortOrder: 19 },
    { id: 40, pid: 2, name: '后摇', description: '后摇音乐', sortOrder: 20 },
    { id: 41, pid: 2, name: '中国风', description: '中国风音乐', sortOrder: 21 },
    
    // 主题子分类
    { id: 51, pid: 3, name: '影视原声', description: '影视原声音乐', sortOrder: 1 },
    { id: 52, pid: 3, name: 'ACG', description: 'ACG音乐', sortOrder: 2 },
    { id: 53, pid: 3, name: '儿童', description: '儿童音乐', sortOrder: 3 },
    { id: 54, pid: 3, name: '90后', description: '90后音乐', sortOrder: 4 },
    { id: 55, pid: 3, name: '00后', description: '00后音乐', sortOrder: 5 },
    { id: 56, pid: 3, name: '网络歌曲', description: '网络歌曲', sortOrder: 6 },
    { id: 57, pid: 3, name: 'KTV', description: 'KTV音乐', sortOrder: 7 },
    { id: 58, pid: 3, name: '经典', description: '经典音乐', sortOrder: 8 },
    
    // 情感子分类
    { id: 61, pid: 4, name: '怀旧', description: '怀旧音乐', sortOrder: 1 },
    { id: 62, pid: 4, name: '清新', description: '清新音乐', sortOrder: 2 },
    { id: 63, pid: 4, name: '浪漫', description: '浪漫音乐', sortOrder: 3 },
    { id: 64, pid: 4, name: '性感', description: '性感音乐', sortOrder: 4 },
    { id: 65, pid: 4, name: '伤感', description: '伤感音乐', sortOrder: 5 },
    { id: 66, pid: 4, name: '治愈', description: '治愈音乐', sortOrder: 6 },
    { id: 67, pid: 4, name: '放松', description: '放松音乐', sortOrder: 7 },
    { id: 68, pid: 4, name: '孤独', description: '孤独音乐', sortOrder: 8 },
    { id: 69, pid: 4, name: '感动', description: '感动音乐', sortOrder: 9 },
    { id: 70, pid: 4, name: '兴奋', description: '兴奋音乐', sortOrder: 10 },
    { id: 71, pid: 4, name: '快乐', description: '快乐音乐', sortOrder: 11 },
    { id: 72, pid: 4, name: '安静', description: '安静音乐', sortOrder: 12 },
    { id: 73, pid: 4, name: '思念', description: '思念音乐', sortOrder: 13 },
    { id: 74, pid: 4, name: '甜蜜', description: '甜蜜音乐', sortOrder: 14 },
    { id: 75, pid: 4, name: '单身', description: '单身音乐', sortOrder: 15 },
    { id: 76, pid: 4, name: '阳光', description: '阳光音乐', sortOrder: 16 },
    
    // 场景子分类
    { id: 81, pid: 5, name: '学习', description: '学习音乐', sortOrder: 1 },
    { id: 82, pid: 5, name: '工作', description: '工作音乐', sortOrder: 2 },
    { id: 83, pid: 5, name: '午休', description: '午休音乐', sortOrder: 3 },
    { id: 84, pid: 5, name: '下午茶', description: '下午茶音乐', sortOrder: 4 },
    { id: 85, pid: 5, name: '地铁', description: '地铁音乐', sortOrder: 5 },
    { id: 86, pid: 5, name: '驾车', description: '驾车音乐', sortOrder: 6 },
    { id: 87, pid: 5, name: '运动', description: '运动音乐', sortOrder: 7 },
    { id: 88, pid: 5, name: '旅行', description: '旅行音乐', sortOrder: 8 },
    { id: 89, pid: 5, name: '散步', description: '散步音乐', sortOrder: 9 },
    { id: 90, pid: 5, name: '酒吧', description: '酒吧音乐', sortOrder: 10 },
    { id: 91, pid: 5, name: '夜店', description: '夜店音乐', sortOrder: 11 },
    { id: 92, pid: 5, name: '约会', description: '约会音乐', sortOrder: 12 },
    { id: 93, pid: 5, name: '聚会', description: '聚会音乐', sortOrder: 13 },
    { id: 94, pid: 5, name: '咖啡厅', description: '咖啡厅音乐', sortOrder: 14 },
    { id: 95, pid: 5, name: '购物', description: '购物音乐', sortOrder: 15 },
    { id: 96, pid: 5, name: '洗澡', description: '洗澡音乐', sortOrder: 16 }
];

// 固定的父级分类定义
const parentCategories = [
    { id: 1, name: '语种', sortOrder: 1 },
    { id: 2, name: '流派', sortOrder: 2 },
    { id: 3, name: '主题', sortOrder: 3 },
    { id: 4, name: '情感', sortOrder: 4 },
    { id: 5, name: '场景', sortOrder: 5 }
];

// 从后端获取分类数据
const fetchCategories = async () => {
    try {
        const categoryPromises = parentCategories.map(async (parent) => {
            try {
                const response = await listCategory(parent.id);
                const children = response && response.data ? response.data : [];
                return {
                    ...parent,
                    children: children.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
                };
            } catch (error) {
                console.error(`获取分类 ${parent.name} 的子分类失败:`, error);
                // 如果某个分类获取失败，使用假数据中对应的子分类
                const mockChildren = mockData.filter(item => item.pid === parent.id);
                return {
                    ...parent,
                    children: mockChildren.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
                };
            }
        });

        const results = await Promise.all(categoryPromises);
        categories.value = results;
    } catch (error) {
        console.error('获取分类数据失败，使用假数据:', error);
        // 完全失败时使用假数据并转换为树形结构
        const treeData = parentCategories.map(parent => {
            const children = mockData.filter(item => item.pid === parent.id);
            return {
                ...parent,
                children: children.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
            };
        });
        categories.value = treeData;
    }
};

const tagGroups = computed(() => {
    const data = categories.value.length > 0 ? categories.value : parentCategories.map(parent => {
        const children = mockData.filter(item => item.pid === parent.id);
        return { ...parent, children };
    });
    
    // 计算每个组的startIndex
    let currentIndex = 0;
    return data.map(group => {
        const startIndex = currentIndex;
        const tagTexts = group.children ? group.children.map(child => child.name) : [];
        const tagCount = tagTexts.length;
        currentIndex += tagCount;
        
        return { 
            title: group.name,
            tagCount,
            tagTexts,
            startIndex 
        };
    });
});

// 组件挂载时获取数据
onMounted(() => {
    fetchCategories();
});
</script>

<style scoped>
.tags-combo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 80px;
  max-width: 1220px;
  min-width: 1220px;
}
</style>